<template>
    <div class="page-content article-list">
        <ElRow justify="space-between" :gutter="10">
            <ElCol :lg="6" :md="6" :sm="14" :xs="16">
                <ElInput v-model="searchVal" :prefix-icon="Search" clearable placeholder="输入文章标题查询"
                    @keyup.enter="searchArticle" />
            </ElCol>
            <ElCol :lg="12" :md="12" :sm="0" :xs="0">
                <div class="custom-segmented">
                    <ElSegmented v-model="yearVal" :options="options" @change="searchArticleByYear" />
                </div>
            </ElCol>
            <ElCol :lg="6" :md="6" :sm="10" :xs="6" style="display: flex; justify-content: end">
                <ElButton @click="toAddArticle" v-auth="'add'">新增文章</ElButton>
            </ElCol>
        </ElRow>

        <div class="list">
            <div class="offset">
                <div class="item" v-for="item in articleList" :key="item.id" @click="toDetail(item)">
                    <!-- 骨架屏 -->
                    <ElSkeleton animated :loading="isLoading" style="width: 100%; height: 100%">
                        <template #template>
                            <div class="top">
                                <ElSkeletonItem variant="image"
                                    style="width: 100%; height: 100%; border-radius: 10px" />
                                <div style="padding: 16px 0">
                                    <ElSkeletonItem variant="p" style="width: 80%" />
                                    <ElSkeletonItem variant="p" style="width: 40%; margin-top: 10px" />
                                </div>
                            </div>
                        </template>

                        <template #default>
                            <div class="top">
                                <ElImage class="cover" :src="item.home_img" lazy fit="cover">
                                    <template #error>
                                        <div class="image-slot">
                                            <ElIcon><icon-picture /></ElIcon>
                                        </div>
                                    </template>
                                </ElImage>

                                <span class="type">{{ item.type_name }}</span>
                            </div>
                            <div class="bottom">
                                <h2>{{ item.title }}</h2>
                                <div class="info">
                                    <div class="text">
                                        <i class="iconfont-sys">&#xe6f7;</i>
                                        <span>{{ useDateFormat(item.create_time, 'YYYY-MM-DD') }}</span>
                                        <div class="line"></div>
                                        <i class="iconfont-sys">&#xe689;</i>
                                        <span>{{ item.count }}</span>
                                    </div>
                                    <ElButton v-auth="'edit'" size="small" @click.stop="toEdit(item)">编辑</ElButton>
                                </div>
                            </div>
                        </template>
                    </ElSkeleton>
                </div>
            </div>
        </div>

        <div style="margin-top: 16vh" v-if="showEmpty">
            <ElEmpty :description="`未找到相关数据 ${EmojiText[0]}`" />
        </div>

        <div style="display: flex; justify-content: center; margin-top: 20px">
            <ElPagination size="default" background v-model:current-page="currentPage" :page-size="pageSize"
                :pager-count="9" layout="prev, pager, next, total,jumper" :total="total" :hide-on-single-page="true"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { Picture as IconPicture } from '@element-plus/icons-vue'

import { ref, onMounted, computed } from 'vue'
import { router } from '@/router'
import { useDateFormat } from '@vueuse/core'
import { Search } from '@element-plus/icons-vue'
import EmojiText from '@/utils/ui/emojo'
import { ArticleList } from '@/mock/temp/articleList'
import { useCommon } from '@/composables/useCommon'
import { RoutesAlias } from '@/router/routesAlias'

defineOptions({ name: 'ArticleList' })

const yearVal = ref('All')

const options = ['All', '2024', '2023', '2022', '2021', '2020', '2019']

const searchVal = ref('')
const articleList = ref<any[]>([])
const currentPage = ref(1)
const pageSize = ref(40)
// const lastPage = ref(0)
const total = ref(0)
const isLoading = ref(true)

const showEmpty = computed(() => {
    return articleList.value.length === 0 && !isLoading.value
})

onMounted(() => {
    getArticleList({ backTop: false })
})

// 搜索文章
const searchArticle = () => {
    getArticleList({ backTop: true })
}

// 根据年份查询文章
const searchArticleByYear = () => {
    getArticleList({ backTop: true })
}

const getArticleList = async ({ backTop = false }) => {
    isLoading.value = true
    // let year = yearVal.value

    if (searchVal.value) {
        yearVal.value = 'All'
    }

    if (yearVal.value === 'All') {
        // year = ''
    }

    // const params = {
    //   page: currentPage.value,
    //   size: pageSize.value,
    //   searchVal: searchVal.value,
    //   year
    // }

    articleList.value = ArticleList
    isLoading.value = false

    if (backTop) {
        useCommon().scrollToTop()
    }

    // const res = await ArticleService.getArticleList(params)
    // if (res.code === ApiStatus.success) {
    //   currentPage.value = res.currentPage
    //   pageSize.value = res.pageSize
    //   lastPage.value = res.lastPage
    //   total.value = res.total
    //   articleList.value = res.data

    //   // setTimeout(() => {
    //   isLoading.value = false
    //   // }, 3000)

    //   if (searchVal.value) {
    //     searchVal.value = ''
    //   }
    // }
}

const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getArticleList({ backTop: true })
}

const toDetail = (item: any) => {
    router.push({
        path: RoutesAlias.ArticleDetail,
        query: {
            id: item.id
        }
    })
}

const toEdit = (item: any) => {
    router.push({
        path: RoutesAlias.ArticlePublish,
        query: {
            id: item.id
        }
    })
}

const toAddArticle = () => {
    router.push({
        path: RoutesAlias.ArticlePublish
    })
}
</script>

<style lang="scss" scoped>
.article-list {
    .custom-segmented .el-segmented {
        height: 40px;
        padding: 6px;

        --el-border-radius-base: 8px;
    }

    .list {
        margin-top: 20px;

        .offset {
            display: flex;
            flex-wrap: wrap;
            width: calc(100% + 20px);

            .item {
                box-sizing: border-box;
                width: calc(20% - 20px);
                margin: 0 20px 20px 0;
                cursor: pointer;
                border: 1px solid var(--art-border-color);
                border-radius: calc(var(--custom-radius) / 2 + 2px) !important;

                &:hover {
                    .el-button {
                        opacity: 1 !important;
                    }
                }

                .top {
                    position: relative;
                    aspect-ratio: 16/9.5;

                    .cover {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        background: var(--art-gray-200);
                        border-radius: calc(var(--custom-radius) / 2 + 2px) calc(var(--custom-radius) / 2 + 2px) 0 0;

                        .image-slot {
                            font-size: 26px;
                            color: var(--art-gray-400);
                        }
                    }

                    .type {
                        position: absolute;
                        top: 5px;
                        right: 5px;
                        padding: 5px 4px;
                        font-size: 12px;
                        color: rgba(#fff, 0.8);
                        background: rgba($color: #000, $alpha: 60%);
                        border-radius: 4px;
                    }
                }

                .bottom {
                    padding: 5px 10px;

                    h2 {
                        font-size: 16px;
                        font-weight: 500;
                        color: #333;

                        @include ellipsis();
                    }

                    .info {
                        display: flex;
                        justify-content: space-between;
                        width: 100%;
                        height: 25px;
                        margin-top: 6px;
                        line-height: 25px;

                        .text {
                            display: flex;
                            align-items: center;
                            color: var(--art-text-gray-600);

                            i {
                                margin-right: 5px;
                                font-size: 14px;
                            }

                            span {
                                font-size: 13px;
                                color: var(--art-gray-600);
                            }

                            .line {
                                width: 1px;
                                height: 12px;
                                margin: 0 15px;
                                background-color: var(--art-border-dashed-color);
                            }
                        }

                        .el-button {
                            opacity: 0;
                            transition: all 0.3s;
                        }
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: $device-notebook) {
    .article-list {
        .list {
            .offset {
                .item {
                    width: calc(25% - 20px);
                }
            }
        }
    }
}

@media only screen and (max-width: $device-ipad-pro) {
    .article-list {
        .list {
            .offset {
                .item {
                    width: calc(33.333% - 20px);

                    .bottom {
                        h2 {
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: $device-ipad) {
    .article-list {
        .list {
            .offset {
                .item {
                    width: calc(50% - 20px);
                }
            }
        }
    }
}

@media only screen and (max-width: $device-phone) {
    .article-list {
        .list {
            .offset {
                .item {
                    width: calc(100% - 20px);
                }
            }
        }
    }
}
</style>
